<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>perspective的两种写法，注意区别</title>
		<style>
			p{color: palevioletred;font-size: 20px;font-weight: bold;}
			div{width: 1200px;height: 200px;}
			#box1{perspective: 600px;border: 2px solid cadetblue;}
			#box1>div{width: 200px;height: 100%;background-color: darkblue;transform: rotateY(45deg);float: left;}
			#box2{border: 2px solid cadetblue;}
			#box2>div{width: 200px;height: 100%;transform: perspective(600px) rotateY(45deg);background-color: darkmagenta;float: left;}
		</style>
	</head>
	<body>
		<h1>1.</h1>
		<h2>这种是以整个容器为舞台</h2>
		<p>上面舞台整个作为透视元素，因此，显然，我们看到的每个子元素的形体都是不一样的</p>
		<div id="box1">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		
		<br /><br /><br />
		
		<h2>这种是以单个内容为舞台</h2>
		<p>每个元素都有一个自己的视点，因此，显然，因为rotateY的角度是一样的，因此，看上去的效果也就一模一样了！</p>
		<div id="box2">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<br /><br /><br />
		<h1>2.</h1>
		<h2>perspective-origin</h2>
		<p>perspective-origin这个属性超级好理解，表示你那双色迷迷的眼睛看的位置。默认就是所看舞台或元素的中心。</p>
		
		<h1>3.</h1>
		<p>transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。preserve-3d符合我们真实世界的思维认识。比方说，你让妹子右转了45度，此时妹子脑袋左转45度想你吐舌卖萌，妹子的脸蛋应该和你是面对面平行的。</p>
		
		<h1>4.</h1>
		<h2>backface-visibility</h2>
		<p>在显示世界中，我们无法穿过软妹A看到其身后的软妹B或C或D；但是，在CSS3的3D世界中，默认情况下，我们是可以看到背后的元素（也不知可不可以透视妹子的衣服~）！</p>
	</body>
</html>
